<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable = no">
  <title>事件点透</title>
  <style>
    #box{
      width: 260px;
      height: 260px;
      background: red;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <div id="box">aaaa</div>
  <script>
    {
      let box = document.querySelector('#box');

      box.addEventListener('touchend', (e) => {
        // setTimeout(() => {
          box.style.display = 'none';
        // }, 300);
        // e.stopPropagation();
        e.preventDefault();
      });

      // 事件点透：
      // 点击时上层元素消失，触碰到下边被遮挡元素的事件。

      // 鼠标事件在移动端的延迟
      // 触碰元素之后，会立即执行 touch 事件，然后记录手指触碰的坐标点，延迟300ms（300ms
      // 并不是精确值），在该坐标去找元素，查看该元素上是否有鼠标点击事件，有的话就执行。

      // 解决：
      // 1、延迟：不靠谱
      // 2、整个页面中不使用鼠标点击事件（如：a的href）
      // 3、在touch事件中阻止默认事件
    }
  </script>
</body>
</html>